<template>
	<view class="wxlogin">
		<view class="san_weix">
			<view class="link"></view>
			<view class="san">其他登录方式</view>
			<view class="link"></view>
		</view>
		<view class="other_sty">
			<view
				class="phone_login"
				@click="onusePhone"
				v-if="type === 0 || type == 2"
			>
				<image
					src="/static/network/login/Vector.svg"
					mode="aspectFit"
					class="img_phone"
				></image>
				<span>验证码登录</span>
			</view>
			<view class="phone_login" @click="onuseKey" v-if="type == 0 || type == 1">
				<image
					src="/static/network/login/key.svg"
					mode="aspectFit"
					class="img_phone"
				></image>
				<span>密码登录</span>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view
				class="phone_login"
				v-if="type == 2 || type == 1"
				@click="noLogin()"
			>
				<uni-icons type="weixin" size="22" color="#5dbd67"></uni-icons>
				<span>快捷登录</span>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<!-- <view class="img_vx" @click="goWx">
				<uni-icons type="weixin" size="24" color="#5dbd67"></uni-icons>
				<span>
					微信登录</span>
			</view> -->
			<!-- #endif -->
		</view>

		<!-- 微信登入 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog
				cancelText="我再想想"
				confirmText="同意"
				title=" "
				@confirm="dialogConfirm"
				@close="dialogClose"
			>
				<view class="wx_tishi">
					<view class="wx_deal">
						请阅读并同意
						<span class="link_a">《服务协议》</span>
						和
						<span class="link_a">《隐私政策》</span>
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>

		<!-- 获取微信头像昵称 -->
		<uni-popup type="bottom" :safe-area="false" ref="wxData">
			<view class="wx_data" v-if="userInfo">
				<view class="from_geli">
					<image
						src="/static/geli.png"
						mode="aspectFill"
						class="img_geli"
					></image>
					<view class="title_geli">长青售后服务 申请</view>
				</view>
				<view class="from_wxdata">
					<view class="title_wx">获取你的昵称、头像</view>
					<view class="wx_data_n_i">
						<image
							:src="userInfo?.avatarUrl"
							mode="aspectFill"
							class="img_wx"
						></image>
						<view class="title">
							<view class="name">
								{{ userInfo?.nickName }}
							</view>
							<view class="wx_tib">微信昵称头像</view>
						</view>
					</view>
					<!-- <view class="use_other">
						使用其他头像和昵称
					</view> -->
				</view>
				<view class="btn_wx">
					<button type="primary" class="btn_reject btn" @click="onReject">
						拒绝
					</button>
					<button
						type="primary"
						class="btn_per btn"
						open-type="getPhoneNumber"
						@getphonenumber="onWxphone"
					>
						允许
					</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import {ref, toRefs} from 'vue';
	import apiLogin from '@/util/network_api/login.js';
	import apiUser from '@/util/network_api/user.js';
	import store from '@/store_network/index.js';
	import weixinConfig from '@/config/mp-weixin'
	
	const props = defineProps({
		//子组件接收父组件传递过来的值
		checked: Boolean,
		type: Number,
	});
	//使用父组件传递过来的值
	const {checked, type} = toRefs(props);
	const emit = defineEmits(['change_type']);
	// const emit = defineEmits(['deleteSong'])
	const alertDialog = ref();
	const wxData = ref();

	const userInfo = ref(null);
	// 微信登入
	const goWx = () => {
		if (checked.value) {
			dialogConfirm();
		} else {
			alertDialog.value.open();
		}
	};
	// 我再看看
	const dialogClose = () => {};
	// 同意
	const dialogConfirm = () => {
		uni.showLoading({
			title: '加载中...',
		});
		uni.getProvider({
			service: 'oauth',
			success: function (res) {
				if (~res.provider.indexOf('weixin')) {
					uni.getUserProfile({
						desc: '用户登录', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
						provider: 'weixin',
						success: (info) => {
							//这里请求接口
							userInfo.value = info.userInfo;
							uni.login({
								provider: 'weixin',
								success: (res2) => {
									const code = res2.code;
									apiLogin.getCode2Session(code).then((res) => {
										wxData.value.open();
									});
								},
								fail: () => {
									uni.showToast({
										title: '微信登录获取用户信息失败',
										icon: 'none',
									});
								},
							});
						},
						fail: () => {
							uni.showToast({
								title: '微信登录授权失败',
								icon: 'none',
							});
						},
					});
				} else {
					uni.showToast({
						title: '请先安装微信或升级版本',
						icon: 'none',
					});
				}
			},
		});
		uni.hideLoading();
	};
	// 拒绝
	const onReject = () => {
		wxData.value.close();
	};
	// 允许
	const onWxphone = (e) => {
		if (e.detail.errMsg == 'getPhoneNumber:ok') {
			uni.showLoading({
				title: '加载中...',
			});
			let data = {
				code: e.detail.code,
				appletAppid: weixinConfig.app_id,
				appletSecret: weixinConfig.app_secret,
			};
			apiLogin.mobileLogin(data).then((res) => {
				wxData.value.close();
				uni.hideLoading();
			});
		}
	};
	const getCodeLogin = (e, type) => {
		uni.login({
			provider: 'weixin',
			success: (res1) => {
				const code = res1.code;
				apiLogin.getCode2Session(code, type).then((res2) => {
					if (res2.code == 20000) {
						if (e.detail.errMsg == 'getPhoneNumber:ok') {
							uni.showLoading({
								title: '加载中...',
								mask: true,
							});
							let data = {
								code: e.detail.code,
								appletAppid: weixinConfig.app_id,
								appletSecret: weixinConfig.app_secret,
							};
							apiLogin.mobileLogin(data, type).then((res) => {
								if (res.code === 20000) {
									const logintime = new Date().getTime();
									let dataValue = {
										logintime: logintime, //当前登录时间戳
										token: res.data.rows.tokenValue, // 设置token值
										refreshToken: res.data.rows.refreshToken, //刷新token
										tokenName: res.data.rows.tokenName, //token请求头
										timeToken: res.data.rows.expireIn, //过期时间(秒)
									};
									uni.setStorageSync('access-network', dataValue);
									getNetworkList();
									// 登录成功后跳转
								}
							});
						}
					}
				});
			},
			fail: () => {
				uni.showToast({
					title: '微信登录获取用户信息失败',
					icon: 'none',
				});
			},
		});
	};
	// 获取服务商列表
	const isRole = ref(uni.getStorageSync('access-network').isRole);
	const getNetworkList = async () => {
		await apiUser.getNetworkInfo().then((res) => {
			uni.hideLoading();
			if (res.code === 20000) {
				if (res.data.rows.networks.length == 1 && !isRole.value) {
					chackListItem(res.data.rows.networks[0]);
				} else {
					uni.navigateTo({
						url: '/pages_network/login/role',
					});
				}
			}
		});
	};
	// 选择服务商
	const chackListItem = async (item) => {
		let dataValue = uni.getStorageSync('access-network');
		let networkCode = '';
		uni.setStorageSync('access-network', {
			...dataValue,
			isRole: item.code,
		});

		if (!item.networkCode) {
			networkCode = '';
		} else {
			networkCode = item.networkCode;
		}
		uni.showLoading({
			title: '加载中',
			mask: true,
		});
		await apiUser
			.getNetwork({
				networkCode: networkCode,
			})
			.then(async (res) => {
				uni.hideLoading();
				if (res.code === 20000) {
					// 获取用户信息
					await store.dispatch('getUpdataUser');
					uni.reLaunch({
						url: '/pages_network/home/home',
					});
					store.commit('set_isRole', item.code);
				}
			});
	};
	const onusePhone = () => {
		emit('change_type', 1);
	};
	const onuseKey = () => {
		emit('change_type', 2);
	};
	const noLogin = () => {
		emit('change_type', 0);
	};
</script>

<style lang="scss" scoped>
	// :deep(uni-popup-dialog) {
	// 	.uni-dialog-title {
	// 		padding-top: 0;
	// 	}
	// }

	.wxlogin {
		box-sizing: border-box;
		padding: 80rpx 60rpx 40rpx;
		// margin: 20rpx auto;

		:deep(.uni-dialog-button-text) {
			font-size: 28rpx;
		}

		:deep(.uni-button-color) {
			color: #007cff;
		}

		:deep(.uni-dialog-title) {
			padding-top: 0;
		}

		:deep(.uni-dialog-content) {
			padding: 40rpx 20rpx;
		}

		.wx_tishi {
			display: flex;
			font-size: 26rpx;
			flex-wrap: nowrap;

			.wx_deal {
				color: #999;
				display: flex;
				flex-wrap: wrap;
				word-wrap: break-word;
				word-break: break-all;
				white-space: pre-wrap;

				.link_a {
					color: #007cff;
					display: flex;
					flex-wrap: nowrap;
				}
			}
		}

		.san_weix {
			display: flex;
			align-items: center;
			justify-content: center;
			// margin-top: 60rpx;
			width: 100%;

			.link {
				width: 100rpx;
				height: 1rpx;
				background-color: rgb(229, 229, 229);
				// flex: 1;
			}

			.san {
				margin: 0 30rpx;
				font-size: 24rpx;
				color: #505050;
			}
		}

		.other_sty {
			display: flex;
			align-items: center;
			justify-content: center;
			// height: 150rpx;
			margin-top: 20rpx;
			column-gap: 20rpx;

			.img_vx {
				align-items: center;
				// margin: 20rpx;
				height: 40rpx;
				// width: 40rpx;
				padding: 10rpx 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 60rpx;
				font-size: 24rpx;
				border: 1px solid rgba(220, 220, 220, 1);
			}

			.phone_login {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 40rpx;
				padding: 10rpx 24rpx;
				border: 1rpx solid rgba(220, 220, 220, 1);
				border-radius: 60rpx;
				font-size: 24rpx;

				.img_phone {
					width: 26rpx;
					height: 36rpx;
					margin-right: 10rpx;
				}
			}

			button {
				padding: 0;
				margin: 0;
				height: 60rpx;
				background-color: #fff;
			}

			button::after {
				border: none;
			}

			uni-button:after {
				padding: 10rpx 24rpx;
				height: 40rpx;
			}
		}

		.wx_data {
			height: 500rpx;
			border-radius: 20rpx 20rpx 0 0;
			overflow: hidden;
			background-color: #fff;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			row-gap: 24rpx;

			.from_geli {
				display: flex;
				align-items: center;

				.img_geli {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
				}

				.title_geli {
					font-size: 28rpx;
					font-weight: bold;
					margin-left: 20rpx;
				}
			}

			.from_wxdata {
				.title_wx {
					font-size: 32rpx;
					font-weight: bold;
					padding: 30rpx 0;
				}

				.wx_data_n_i {
					display: flex;

					.img_wx {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
					}

					.title {
						display: flex;
						flex-direction: column;
						justify-content: center;
						margin-left: 20rpx;

						.name {
							font-size: 28rpx;
							font-weight: bold;
							margin-bottom: 6rpx;
						}

						.wx_tib {
							font-size: 24rpx;
							color: #999;
						}
					}
				}

				.use_other {
					margin: 40rpx 0;
					font-size: 28rpx;
					color: #576b95;
				}
			}

			.btn_wx {
				display: flex;
				align-items: center;
				column-gap: 24rpx;

				.btn {
					width: 20%;
					height: 70rpx;
					font-size: 28rpx;
					font-weight: bold;
					line-height: 70rpx;
				}

				.btn_per {
					background-color: #5dbd67;
					color: #fff;
					margin-left: 14rpx;

					&::after {
						border: none;
					}
				}

				.btn_reject {
					background-color: rgba(0, 0, 0, 0.05);
					color: #5dbd67;
					margin-right: 14rpx;

					&::after {
						border: none;
					}
				}
			}
		}
	}
</style>
